<template>
	<div class="house">
		<mymask v-if='open' @getChildrenflag="setting" :btn="mydate.btn" v-on:lisentype='sendtype'></mymask>
		<div class="header" :style="headerheight">
			<div class="h-left">
				<router-link to="/"><img src="../../../../static/image/log.png" /></router-link>
				<span>重庆</span>
			</div>
			<div class="h-right">
				<i class="user" @click="btnuser"></i>
				<i @click="opensearch"></i>
			</div>
		</div>
		<div class="term">
			<div class="term-nav">
				<ul class="nav-list">
					<li v-for="(list, index) in list" v-bind:class="{'active':idx==index}" @click="changeList(index)">{{list}}
						<i :class="icon[index]"></i></li>
				</ul>
			</div>
			<div class="term-show" @click="close" v-if="flags">
				<!--面积选项显示-->
				<div @click.stop class="t-s-l" v-show="steps[0]">
					<div class="t-s-l-top">
						<ul class="t-s-l-top-u">
							<li v-for="(list, index) in termlist" v-bind:class="{'active':ind==index}" @click="changeBgc(index)">{{list}}</li>
						</ul>
						<div class="nearby">
							<i class="el-icon-location"></i>
							<span>附近</span>
						</div>
					</div>
					<div class="address-list">
						<!--商圈-->
						<div class="t-s-l-address" v-show="flag">
							<div class="t-s-l-a-left">
								<ul class="t-s-l-a-l-u">
									<li v-for="(item, index) in cityInfo" @click="changeCity(index)" v-bind:class="{'active':cityindex==index}">{{item.city}}</li>
								</ul>
							</div>
							<div class="t-s-l-a-right">
								<ul class="t-s-l-a-r-u">
									<li v-for="(item, index) in cityInfo[addressindex].children" @click="house(item+',house_district')">{{item}}</li>
								</ul>
							</div>
						</div>
						<!--地铁站-->
						<div class="t-s-l-address" v-if="!flag">
							<div class="t-s-l-a-left">
								<ul class="t-s-l-a-l-u">
									<li v-for="(item, index) in metroInfo" @click="changeMetro(index)" v-bind:class="{'active':metroindex==index}">{{item.metro}}</li>
								</ul>
							</div>
							<div class="t-s-l-a-right">
								<ul class="t-s-l-a-r-u">
									<li v-for="(item, index) in metroInfo[mindex].children" @click="house(item+',house_district')">{{item}}</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!--面积显示-->
				<div @click.stop class="area-show" v-show="steps[1]">
					<div>
						<ul class="p-s-l">
							<li @click="house(0+',house_floorspace')">全部面积</li>
							<li @click="house(1+',house_floorspace')">0-100㎡</li>
							<li @click="house(2+',house_floorspace')">100-300㎡</li>
							<li @click="house(3+',house_floorspace')">300-500㎡</li>
							<li @click="house(4+',house_floorspace')">500-1000㎡</li>
							<li @click="house(5+',house_floorspace')">1000㎡以上</li>
							<div class="m-show">
								<div class="m-title">{{value8}}以下(单位:㎡)</div>
								<div class="m-numset">
									<div class="block">
										<el-slider></el-slider>
									</div>
									<span>确定</span>
								</div>
								<div class="nums">
									<span>0</span>
									<span>1000以上</span>
								</div>
							</div>
						</ul>
					</div>
				</div>
				<!--价格显示-->
				<div @click.stop class="price-show" v-show="steps[2]">
					<div class="p-s-left">
						<ul class="p-s-l-ul">
							<li v-for="(item, index) in pricenav" @click="changepricenav(index)" v-bind:class="{'active':priceindex==index}">{{item}}</li>
						</ul>
					</div>
					<div class="p-s-right">
						<div v-if="priceflag[1]">
							<ul class="p-s-r">
								<li @click="house(0+',house_unitprice')">不限</li>
								<li @click="house(1+',house_unitprice')">0-40元/㎡.月</li>
								<li @click="house(2+',house_unitprice')">40-60元/㎡.月</li>
								<li @click="house(3+',house_unitprice')">60-80元/㎡.月</li>
								<li @click="house(4+',house_unitprice')">80-120元/㎡.月</li>
								<li @click="house(5+',house_unitprice')">120-140元/㎡.月</li>
								<li @click="house(6+',house_unitprice')">140元/㎡月以上</li>
							</ul>
							<div class="m-show">
								<div class="m-title">以下(单位:㎡)</div>
								<div class="m-numset">
									<div class="block">
										<el-slider></el-slider>
									</div>
								</div>
								<div class="nums">
									<span>0</span>
									<span>1000以上</span>
								</div>
								<span class="issure">确定</span>
							</div>
						</div>
						<div v-if="priceflag[0]">
							<ul class="p-s-r">
								<li @click="house(0+',house_totalprices')">不限</li>
								<li @click="house(1+',house_totalprices')">0-0.5万元/月</li>
								<li @click="house(2+',house_totalprices')">0.5-1.5万元/月</li>
								<li @click="house(3+',house_totalprices')">1.5-3万元/月</li>
								<li @click="house(4+',house_totalprices')">3-5万元/月</li>
								<li @click="house(5+',house_totalprices')">5-10万元/月</li>
								<li @click="house(6+',house_totalprices')">10万元/月以上</li>
							</ul>
							<div class="m-show">
								<div class="m-title">以下(单位:万元/月)</div>
								<div class="m-numset">
									<div class="block">
										<el-slider></el-slider>
									</div>
								</div>
								<div class="nums">
									<span>0</span>
									<span>不限</span>
								</div>
								<span class="issure">确定</span>
							</div>
						</div>
					</div>
				</div>
				<!--更多显示-->
				<div @click.stop class="more-show" v-show="steps[3]">
					<div class="type">
						<div class="type-title">类型</div>
						<div class="type-icon">
							<ul class="t-s-ul">
								<li v-for="(item, index) in type" @click="changetype(index)"><i></i><span v-bind:class="{'active':typeindex==index}">{{item}}</span></li>
							</ul>
						</div>
					</div>
					<div class="type">
						<div class="type-title">装修</div>
						<div>
							<ul class="t-t-type">
								<li v-for="(item, index) in decorate" @click="changedecorate(index)"><span v-bind:class="{'active':decorateindex==index}">{{item}}</span></li>
							</ul>
						</div>
					</div>
					<div class="brand">品牌</div>
					<div class="feature">
						<div class="feature-title">特色</div>
						<div>
							<ul class="t-t-type">
								<li v-for="(item, index) in feature" @click="changefeature($event,index)"><span>{{item}}</span></li>
							</ul>
							<div class="style"></div>
						</div>
					</div>
					<div class="more-show-bottom">
						<div class="m-s-b-clear"><i class="fa fa-trash-o"></i>清空条件</div>
						<div class="m-s-b-btn"><span>确定</span></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mymask from '@/components/public/mymask'
	export default {
		name: "myheader",
		data() {
			return {
				mydate:{
					btn:['','取消']
				},
				open:false,
				feature: ['不限', '可注册', '地铁10分钟', '带办公家具', '热门楼盘', '户型方正', '免费车位', '知名开发商', '知名物业', '整栋'],
				type: ['全部', '普通办公', '共享办公', '创意园区'],
				typeindex: 0,
				decorate: ['全部', '豪华装修', '精装修', '中等装修', '简装修', '毛坯'],
				decorateindex: 0,
				pricenav: ['总价', '单价'],
				priceflag: [false, true],
				priceindex: 1,
				list: ['位置', '面积', "价格", "更多"],
				termlist: ["商圈", "地铁站"],
				icon: ['el-icon-arrow-down', 'el-icon-arrow-down', 'el-icon-arrow-down', 'el-icon-arrow-down'],
				steps: [false, false, false, false],
				idx: '-1',
				ind: '',
				flag: true,
				flags: false,
				value8: '',
				cityInfo: [{
						city: '全部',
						children: ['菜园坝', '大坪', '太溪沟', '化龙桥', '解放碑', '两路口', '七星岗', '上清寺', '渝中其他', '朝天门', '江北1', '江北2', '江北3', '江北4', '江北5', '江北6', '江北7', '江北8', '江北9', '江北10', '江北11', '渝北1', '渝北2', '渝北3', '渝北4', '渝北5', '渝北6', '渝北7', '渝北8', '渝北9', '渝北10', '渝北11']
					},
					{
						city: '渝中',
						children: ['全渝中', '菜园坝', '大坪', '太溪沟', '化龙桥', '解放碑', '两路口', '七星岗', '上清寺', '渝中其他', '朝天门']
					},
					{
						city: '江北',
						children: ['江北1', '江北2', '江北3', '江北4', '江北5', '江北6', '江北7', '江北8', '江北9', '江北10', '江北11']
					},
					{
						city: '渝北',
						children: ['渝北1', '渝北2', '渝北3', '渝北4', '渝北5', '渝北6', '渝北7', '渝北8', '渝北9', '渝北10', '渝北11']
					}
				],
				cityindex: 0, //控制地区左边点击切换样式
				addressindex: 0, //地区改变后具体地址跟着改变
				metroInfo: [{
						metro: '全部线路',
						children: [
							'较场口', '临江门', '黄花园', '大溪沟', '曾家岩', '牛角沱', '李子坝', '佛图关', '大坪', '袁家岗', '谢家湾', '杨家坪', '动物园', '大堰村', '马王场', '平安', '大渡口', '新山村', '天堂堡', '建桥', '金家湾', '刘家坝', '白居寺', '大江', '鱼洞',
							'一号线沿线', '小什字', '较场口', '七星岗', '两路口', '鹅岭', '大坪', '石油路', '歇台子', '石桥铺', '高庙村', '马家岩', '小龙坎', '沙坪坝', '杨公桥', '烈士墓', '磁器口', '石井坡', '双碑', '赖家桥', '微电园', '陈家桥', '大学城', '尖顶坡',
							'鱼洞', '金竹', '鱼胡路', '学堂湾', '大山村', '花溪', '岔路口', '九公里', '麒龙', '八公里', '二塘', '六公里', '五公里', '四公里', '南坪', '工贸', '铜元局', '两路口', '牛角', '沱华', '新街', '观音桥', '红旗河沟', '嘉州路', '郑家院子', '唐家院子', '狮子坪', '重庆北站', '龙头寺', '童家院子', '金渝', '金童路', '鸳鸯', '园博园', '翠云', '长福路', '回兴', '双龙', '碧津', '江北机场',
							'北碚', '天生', '状元碑', '龙凤溪', '向家岗', '蔡家', '曹家湾', '金山寺', '礼嘉', '九曲河', '康庄', '大竹林', '光电园', '冉家坝', '大龙山', '花卉园', '红旗河沟', '黄泥塝', '红土地', '五里店', '江北城', '大剧院', '小什字', '上新街', '刘家坪', '长生桥', '邱家湾', '茶园',
							'茶园', '邱家湾', '长生桥', '刘家坪', '上新街', '小什字', '大剧院', '五里店', '红土地', '黄泥塝', '红旗河沟', '花卉园', '大龙山', '冉家坝', '光电园', '大竹林', '康庄', '九曲河', '礼嘉', '平场', '黄茅坪', '国博中心', '悦来'
						]
					},
					{
						metro: '1号线',
						children: ['一号线沿线', '小什字', '较场口', '七星岗', '两路口', '鹅岭', '大坪', '石油路', '歇台子', '石桥铺', '高庙村', '马家岩', '小龙坎', '沙坪坝', '杨公桥', '烈士墓', '磁器口', '石井坡', '双碑', '赖家桥', '微电园', '陈家桥', '大学城', '尖顶坡']
					},
					{
						metro: '2号线',
						children: ['较场口', '临江门', '黄花园', '大溪沟', '曾家岩', '牛角沱', '李子坝', '佛图关', '大坪', '袁家岗', '谢家湾', '杨家坪', '动物园', '大堰村', '马王场', '平安', '大渡口', '新山村', '天堂堡', '建桥', '金家湾', '刘家坝', '白居寺', '大江', '鱼洞']
					},
					{
						metro: '3号线',
						children: ['鱼洞', '金竹', '鱼胡路', '学堂湾', '大山村', '花溪', '岔路口', '九公里', '麒龙', '八公里', '二塘', '六公里', '五公里', '四公里', '南坪', '工贸', '铜元局', '两路口', '牛角', '沱华', '新街', '观音桥', '红旗河沟', '嘉州路', '郑家院子', '唐家院子', '狮子坪', '重庆北站', '龙头寺', '童家院子', '金渝', '金童路', '鸳鸯', '园博园', '翠云', '长福路', '回兴', '双龙', '碧津', '江北机场']

					},
					{
						metro: '6号线',
						children: ['北碚', '天生', '状元碑', '龙凤溪', '向家岗', '蔡家', '曹家湾', '金山寺', '礼嘉', '九曲河', '康庄', '大竹林', '光电园', '冉家坝', '大龙山', '花卉园', '红旗河沟', '黄泥塝', '红土地', '五里店', '江北城', '大剧院', '小什字', '上新街', '刘家坪', '长生桥', '邱家湾', '茶园']

					},
					{
						metro: '园博线',
						children: ['茶园', '邱家湾', '长生桥', '刘家坪', '上新街', '小什字', '大剧院', '五里店', '红土地', '黄泥塝', '红旗河沟', '花卉园', '大龙山', '冉家坝', '光电园', '大竹林', '康庄', '九曲河', '礼嘉', '平场', '黄茅坪', '国博中心', '悦来']
					}
				],
				metroindex: 1,
				mindex: 1,
				headerheight:'height:0.8rem;',
				types : ""
			}
		},
		components: {
			mymask
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
			var userId = localStorage.getItem("userId");
			if(userId == null){
				$(".user").css("background-position"," -0.6rem 0");
			}else{
				$(".user").css("background-position"," -0.05rem 0");
			}
		},
		methods: {
			//判断登录
			btnuser(){
				var userId = localStorage.getItem("userId");
				if(userId == null){
					this.$router.push('/user');
				}else{
					this.$router.push('/my');
				}
			},
			house:function(add){
				this.$emit('lisenaddress',add);
				this.flags = false;
			},
			sendtype:function(data){
				this.open = data;
			},
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				if(scrollTop>=200){
					this.headerheight = 'height:0rem;';
				}else{
					this.headerheight = 'height:0.8rem;';
				}
			},
			changeList: function(index) {
				if(this.steps[index]) {
					this.flags = !this.flags;
					this.idx = -1;
					if(!this.flags) {
						for(var i = 0; i < 4; i++) {
							this.icon[i] = "el-icon-arrow-down";
						}
					} else {
						this.idx = index;
						this.icon[index] = "el-icon-arrow-up";
					}
				} else {
					this.idx = index;
					for(var i = 0; i < 4; i++) {
						this.steps[i] = false;
						this.icon[index] = "el-icon-arrow-down";
					}
					this.flags = true;
					this.steps[index] = !this.steps[index];
					if(this.icon[index] == 'el-icon-arrow-down') {
						for(var i = 0; i < 4; i++) {
							this.icon[i] = "el-icon-arrow-down";
						}
						this.icon[index] = "el-icon-arrow-up";
					}
				}
			},
			changeBgc: function(index) {
				if(this.ind !== index) {
					this.ind = index;
					this.flag = !this.flag;
				}
			},
			/*切换城市*/
			changeCity: function(index) {
				this.cityindex = index;
				this.addressindex = this.cityindex;
			},
			/*切换地铁线*/
			changeMetro: function(index) {
				this.metroindex = index;
				this.mindex = this.metroindex;
			},
			/*切换价格*/
			changepricenav: function(index) {
				this.priceindex = index;
				for(var i = 0; i < 2; i++) {
					this.priceflag[i] = false;
				}
				this.priceflag[index] = !this.priceflag[index];
			},
			/*改变装修条件*/
			changedecorate: function(index) {
				this.decorateindex = index;
			},
			/*改变类型条件*/
			changetype: function(index) {
				this.typeindex = index;
			},
			/*改变特色条件*/
			changefeature: function(e, index) {
				if(e.toElement.className == "active") {
					e.toElement.className = '';
				} else {
					e.toElement.className = "active";
				}
				if(index == 0) {

				}
			},
			/*是否显示搜索*/
			opensearch:function(){
				this.open = true;
			},
			/*设置显示搜索*/
			setting(res) {
				if (res.cances == 1) {
					this.open = res.flag;
				}
			},
			close: function() {
				this.flags = false;
				this.idx = -1;
				for(var i = 0; i < 4; i++) {
					this.icon[i] = "el-icon-arrow-down";
				}
			}
		}
	}
</script>

<style>
	.m-show {
		position: relative;
	}
	
	.house {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99999999;
	}
	
	.term-show {
		background: rgba(0, 0, 0, 0.3);
		z-index: 3;
	}
	
	li {
		list-style: none;
	}
	
	.m-s-b-clear {
		font-size: 0.25rem;
		line-height: 1rem;
		color: #666666;
	}
	
	.m-s-b-clear i {
		margin: 0 0.2rem;
	}
	
	.m-s-b-btn {
		width: 4rem;
	}
	
	.m-s-b-btn>span {
		display: block;
		width: 4.6rem;
		height: .6rem;
		line-height: .6rem;
		font-size: 0.3rem;
		background: #f90;
		color: #fff;
		-moz-border-radius: .05333333rem;
		-webkit-border-radius: .05333333rem;
		border-radius: .05333333rem;
		text-align: center;
		text-align: -webkit-center;
		text-align: -moz-center;
		position: absolute;
		top: .2rem;
		right: .3rem;
	}
	
	.style {
		width: 100%;
		height: 1rem;
		clear: both;
	}
	
	.more-show-bottom {
		width: 100%;
		height: 1rem;
		background: #f9f9f9;
		position: fixed;
		bottom: 3.73rem;
		z-index: 2;
		display: flex;
	}
	
	.more-show {
		overflow: hidden;
		overflow-y: scroll;
		position: relative !important;
	}
	
	.feature {
		width: 100%;
		font-size: 0.25rem;
		color: #333;
	}
	
	.brand {
		width: 7.5rem;
		font-size: 0.3rem;
		clear: both;
		color: #333;
	}
	
	.t-t-type {
		width: 6rem;
		height: auto;
	}
	
	.t-t-type>li {
		float: left;
		margin: 0.2rem;
		margin-top: 0rem;
	}
	
	.t-t-type>li>.active {
		background: #ffefd8;
		color: #FD9827;
	}
	
	.t-t-type>li>span {
		display: block;
		width: 1.5rem;
		height: .5rem;
		line-height: .5rem;
		background: #f9f9f9;
		border: .025rem solid #f5f5f5;
		color: #999;
		text-align: center;
		-moz-border-radius: .05333333rem;
		-webkit-border-radius: .05333333rem;
		border-radius: .05333333rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 0.25rem;
	}
	
	.type-icon {
		margin-top: -0.4rem;
	}
	
	.type-title {
		font-size: 0.3rem;
	}
	
	.t-s-ul>li:nth-of-type(4)>i {
		display: block;
		background: url(../../../../static/image/icons.png) no-repeat;
		background-size: 7rem 7rem;
		background-position: -1.9rem -2.1rem;
		width: .7rem;
		height: .9rem;
	}
	
	.t-s-ul>li:nth-of-type(3)>i {
		display: block;
		background: url(../../../../static/image/icons.png) no-repeat;
		background-size: 7rem 7rem;
		background-position: -1.24rem -2.1rem;
		width: .7rem;
		height: .9rem;
	}
	
	.t-s-ul>li:nth-of-type(2)>i {
		display: block;
		background: url(../../../../static/image/icons.png) no-repeat;
		background-size: 7rem 7rem;
		background-position: -0.58rem -2.1rem;
		width: .7rem;
		height: .9rem;
	}
	
	.t-s-ul>li:first-of-type>i {
		display: block;
		background: url(../../../../static/image/icons.png) no-repeat;
		background-size: 7rem 7rem;
		background-position: 0rem -2.1rem;
		width: .7rem;
		height: .9rem;
	}
	
	.t-s-ul {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	
	.t-s-ul li {
		text-align: center;
	}
	
	.t-s-ul li i {
		margin-left: 0.3rem !important;
	}
	
	.t-s-ul li span {
		display: block;
		width: 1.3rem;
		height: 0.5rem;
		line-height: 0.5rem;
		background: #f9f9f9;
		border: .025rem solid #f5f5f5;
		color: #999;
		text-align: center;
		-moz-border-radius: .05333333rem;
		-webkit-border-radius: .05333333rem;
		border-radius: .05333333rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 0.25rem;
		margin-top: 0.1rem;
	}
	
	.t-s-ul li>.active:first-of-type {
		background: #ffefd8;
		color: #FD9827;
	}
	
	.more-show {
		width: 100%;
		height: 8rem;
		background: #fff;
	}
	
	.more-show>div {
		padding-left: 0.3rem;
		box-sizing: border-box;
	}
	
	.issure {
		position: absolute;
		left: 21%;
		bottom: -1rem;
		display: inline-block;
		width: 3rem;
		height: 0.5rem;
		line-height: 0.5rem;
		text-align: center;
		background: #fd9827;
		font-size: 0.25rem;
		color: #fff;
		border-radius: 5px;
	}
	
	.p-s-r {
		width: 100%;
		height: 4.2rem;
		font-size: 0.25rem;
		color: #666666;
		border-bottom: 0.025rem solid #D6D6D6;
	}
	
	.p-s-r li {
		width: 100%;
		height: 0.6rem;
		line-height: 0.6rem;
		padding-left: 0.3rem;
		box-sizing: border-box;
	}
	
	.p-s-l-ul {
		width: 100%;
		height: auto;
		font-size: 0.25rem;
		color: #666666;
	}
	
	.p-s-l-ul>.active {
		background: #fff;
		color: #FD9827;
	}
	
	.p-s-l-ul li {
		padding-left: 0.3rem;
		box-sizing: border-box;
		height: 0.8rem;
	}
	
	.p-s-left {
		width: 1.75rem;
		height: 100%;
		background: #f9f9f9;
	}
	
	.p-s-right {
		width: 5.7rem;
	}
	
	.header {
		width: 100%;
		height: 0rem;
		line-height: 0.8rem;
		background: #333333;
		display: flex;
		transition: all 0.5s ease;
		position: relative;
		overflow: hidden !important;
	}
	
	.h-left {
		width: 50%;
		height: 100%;
	}
	
	.h-left img {
		position: absolute;
		height: 0.5rem;
		top: 0.15rem;
		left: 0.2rem;
	}
	
	.h-left span {
		color: #fafafa;
		font-size: 0.25rem;
		margin-left: 1.3rem;
	}
	
	.h-right {
		width: 50%;
		height: 100%;
		text-align: right;
		padding-right: 0.3rem;
		box-sizing: border-box;
	}
	
	.h-right i {
		display: inline-block;
		height: 0.5rem;
		width: 0.5rem;
		color: #d6d6d6;
	}
	
	.h-right i:first-of-type {
		display: block;
		background: url(../../../../static/image/icon_sprites.png) no-repeat;
		background-size: 8rem 8rem;
		position: absolute;
		right: 0.1rem;
		top: 0.17rem;
	}
	
	.h-right i:nth-of-type(2) {
		display: block;
		background: url(../../../../static/image/icon_sprites.png) no-repeat;
		background-size: 7rem 7rem;
		background-position: -1.3rem -0.5rem;
		position: absolute;
		right: 0.9rem;
		top: 0.15rem;
	}
	
	.term {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		background: #f0f0f0;
	}
	
	.nav-list {
		width: 100%;
		list-style: none;
		display: flex;
		justify-content: space-around;
		font-size: 0.3rem;
		color: #595959;
	}
	
	.nav-list>.active {
		color: #fe9900;
	}
	
	.t-s-l {
		width: 100%;
		height: 8.06rem;
		background: #f9f9f9;
	}
	
	.t-s-l-top {
		width: 100%;
		height: 1.45rem;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}
	
	.t-s-l-top-u {
		width: 100%;
		height: 1.45rem;
		display: flex;
		list-style: none;
		align-items: center;
		justify-content: center;
	}
	
	.t-s-l-top-u>li {
		width: 2rem;
		height: 0.65rem;
		line-height: 0.65rem;
		text-align: center;
		background: #fff;
		font-size: 0.29rem;
		color: #666666;
	}
	
	.t-s-l-top-u>.active {
		background: #fe9900;
		color: #fff;
	}
	
	.nearby {
		position: absolute;
		color: #999999;
		top: 0.3rem;
		right: 0.4rem;
		font-size: 0.2rem;
	}
	
	.t-s-l-address {
		width: 100%;
		height: 6.6rem;
		display: flex;
		overflow: hidden;
	}
	
	.t-s-l-a-left {
		width: 3.8rem;
		height: 100%;
		overflow: hidden;
		overflow-y: scroll;
	}
	
	.t-s-l-a-right {
		width: 3.7rem;
		height: 6.5rem;
		background: #fff;
		overflow: hidden;
		overflow-y: scroll;
	}
	
	.t-s-l-a-l-u {
		list-style: none;
		font-size: 0.29rem;
		color: #404040;
	}
	
	.t-s-l-a-l-u>li {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		padding-left: 0.4rem;
		box-sizing: border-box;
	}
	
	.t-s-l-a-l-u>.active {
		background: #fff;
		color: #fe9900;
	}
	
	.t-s-l-a-r-u {
		width: 100%;
		font-size: 0.25rem;
	}
	
	.t-s-l-a-r-u>li {
		width: 100%;
		height: 0.8rem;
		padding-left: 0.3rem;
		box-sizing: border-box;
		color: #454545;
	}
	
	.address-list {
		position: relative;
	}
	
	.t-s-l-address {
		position: absolute;
	}
	
	.area-show {
		width: 100%;
		height: 8rem;
		background: #fff;
	}
	
	.p-s-l {
		width: 100%;
		height: 0.9rem;
		color: #666666;
	}
	
	.p-s-l li {
		border-bottom: 0.025rem solid #fdfdfd;
		padding-left: 0.6rem;
		box-sizing: border-box;
		font-size: 0.28rem;
	}
	
	.block {
		width: 3.5rem;
		height: 0.5rem;
		margin: auto;
		bottom: 0;
	}
	
	.m-numset {
		position: relative;
	}
	
	.m-numset>span {
		position: absolute;
		display: inline-block;
		width: 1.3rem;
		height: 0.5rem;
		line-height: 0.5rem;
		text-align: center;
		background: #fd9827;
		right: 0.2rem;
		top: 0.2rem;
		font-size: 0.25rem;
		color: #fff;
		border-radius: 5px;
	}
	
	.m-title {
		text-align: center;
		font-size: 0.2rem !important;
		color: #666666;
	}
	
	.nums {
		width: 100%;
		height: 0.5rem;
		font-size: 0.25rem;
		color: #666666;
		padding-top: 0.2rem;
		padding-left: 1rem;
		padding-right: 0.5rem;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	
	.term-show {
		width: 100%;
		height: 11.7rem;
		background: rgba(0, 0, 0, 0.5);
	}
	
	.price-show {
		width: 100%;
		height: 8rem;
		background: #fff;
		display: flex;
	}
</style>